import type { InferGetStaticPropsType } from "next";
import Link from "next/link";

import { reqGetArticles, Articles } from "../api";

import styles from "../styles/Home.module.css";

/*
  getServerSideProps
    启动项目编译代码，此时不发送请求，
    当用户访问当前路由，才会触发getServerSideProps发送请求，
      将数据渲染到页面上，返回页面给客户端

  getStaticProps
    启动项目编译代码，触发getStaticProps，发送请求，将数据渲染到页面上
    当用户访问当前路由，返回页面给客户端

  getStaticPaths
*/

export async function getStaticProps() {
  const res = await reqGetArticles();

  // 必须返回一个对象
  // 对象中props属性得值，就会传递给当前组件
  return {
    props: {
      articles: res.data.data,
    },
  };
}

// interface HomeProps {
//   articles: Articles;
// }

// const Home = ({ articles }: HomeProps) => {
const Home = ({ articles }: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <div className={styles["home-container"]}>
      {articles.map((article) => {
        return (
          <Link key={article.id} href={`/post/${article.id}`}>
            <li>
              <div className={styles["home-meta"]}>
                <div>{article.author}</div>
                <div className={styles.date}>{article.createTime}</div>
                <div>
                  {article.categoryList.map((tag, index) => {
                    return (
                      <a className={styles.tag} key={index}>
                        {tag}
                      </a>
                    );
                  })}
                </div>
              </div>
              <div className={styles.title}>{article.title}</div>
              <div className={styles.abstract}>{article.content}</div>
              <div className={styles["action-list"]}>
                <span>浏览数: {article.viewNum}</span>
                <span>点赞数: {article.loveNum}</span>
                <span>评论数: {article.commentNum}</span>
              </div>
            </li>
          </Link>
        );
      })}
    </div>
  );
};

export default Home;
